<template>
    <div class="hall_bg">
        <header class="hall_bg--header">宝石商人</header>

        <div class="play-game-btn" @click="startPlay">开始游戏</div>
    </div>
</template>

<script setup lang="ts">
const router = useRouter();

const startPlay = () => {
    router.push('/room');
};
</script>

<style scoped lang="less">
.hall_bg {
    background: url(@/assets/hall_bg.jpg) no-repeat center / 100% 100%;
    width: 100%;
    /* prettier-ignore */
    max-width: 750PX; /*no*/
    height: 100vh;
    padding: 40px 20px;
    margin: 0 auto;

    &--header {
        color: #eee;
        font-size: 5em;
        font-weight: bold;
        margin-top: 1em;
        text-align: center;
    }

    .play-game-btn {
        width: 600px;
        height: 600px;
        background-color: #1677ff;
        margin: 300px auto 0;
        border-radius: 50%;
        position: relative;
        color: #fff;
        text-align: center;
        font-size: 100px;
        line-height: 600px;
        font-weight: bold;
        transition: all 0.3s;

        &:active {
            box-shadow: 0 0 38px 0 #1677ff;
        }
    }
}
</style>
